<!DOCTYPE html>
<html>

<head>
    <!-- Basic -->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta http-equiv="refresh" content="18000"  >
    <!-- Mobile Metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <!-- Site Metas -->
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="" />

    <title>Coffeee</title>

    <!-- slider stylesheet -->
    <link rel="stylesheet" type="text/css" href="../static/css/owl.carousel.min.css" />

    <!-- bootstrap core css -->
    <link rel="stylesheet" type="text/css" href="../static/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    {#    <link rel="stylesheet" href="http://i.gtimg.cn/vipstyle/frozenui/2.0.0/css/frozen.css">#}
    <!-- fonts style -->
    {#    <link href="https://fonts.googleapis.com/css?family=Lato:400,700|Open+Sans:400,700&display=swap" rel="stylesheet" />#}

    <!-- Custom styles for this template -->
    <link href="../static/css/style.css" rel="stylesheet" />
    <!-- responsive style -->
    <link href="../static/css/responsive.css" rel="stylesheet" />
    <script src="https://lib.baomitu.com/echarts/5.0.0/echarts.min.js"></script>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
</head>

<body style="background-color: #fefefe">
<script src="https://www.layuicdn.com/layui/layui.js"></script>



{% for i in FengMi_Materail_all_data %}
    <div class="table-responsive">
    <table class="table">
    <thead>
    <tr class="success">
        <th>料号</th>
        <th>机型</th>
        <th>已使用</th>
        <th>未使用</th>
        <th>总量</th>
        <th>更新时间</th>
    </tr>
    </thead>
    <tr class="success">
        <td class="success" id="item_no">{{ i.1 }}</td>
        <td class="success" id="materail_name">{{ i.2 }}</td>
        <td class="success" id="used">{{ i.4 }}</td>
        <td class="success" id="not_used">{{ i.5 }}</td>
        <td class="success" id="all_num">{{ i.6 }}</td>
        <td class="success" id="refresh_time">{{ i.7 }}</td>
    </tr>

    </table>
        <div style="height: 300px;width:300px;background-color: #faf8f8" id="echart01"> </div>
        <script>

            var chartDom = document.getElementById('echart01');
            var myChart = echarts.init(chartDom);
            var option;
            var item_no = document.getElementById("item_no").innerHTML
            var used = document.getElementById("used").innerHTML
            var not_used = document.getElementById("not_used").innerHTML

            option = {
                title: {
                    text: '测试物料1使用情况',
                    subtext: '',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '50%',
                        data: [

                            {value: used, name: '已使用'},
                            {value: not_used, name: '未使用'}
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            option && myChart.setOption(option);

        </script>
    </div>



{% endfor %}









</body>
<script type="text/javascript" src="../static/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../static/js/bootstrap.js"></script>
<script type="text/javascript" src="../static/js/owl.carousel.min.js"></script>



</html>